<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#A1 {
				width: 100%;
				height: 800px;
				display: flex;
				justify-content: center;
				
			}
				#A2{
				width: 600px;
				height: 500px;
				overflow: hidden;	
				
				
			}
			#A3 {
				width: 1000px;
				height: 100px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-style: solid;
				border-bottom-style: solid;
				border-width: 1px;
				border-color: red;
				margin-top: 200px;
			}
			#A3 img{
				width: 100px;
				height: 100px;
				
				
			}
		</style>
	</head>
	<body>
		
		<div id="A1">	
			<div id="A2">
				<div id="A3" onmouseenter="ABBD();" onmouseleave="MOVE()">
					<img src="Img/1.jpeg" >
					<img src="Img/2.jpeg" >
					<img src="Img/3.jpeg" >
					<img src="Img/4.jpeg" >
					<img src="Img/5.jpeg" >
					<img src="Img/6.jpeg" >
					<img src="Img/7.jpeg" >
					<img src="Img/8.jpeg" >
					<img src="Img/9.jpeg" >
					<img src="Img/10.jpeg" >
					<img src="Img/1.jpeg" >
					<img src="Img/2.jpeg" >
					<img src="Img/3.jpeg" >
					<img src="Img/4.jpeg" >
					<img src="Img/5.jpeg" >
					<img src="Img/6.jpeg" >
				</div>	
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var imgobj=document.getElementById('A3')
		var	marginleft=0;
		var mnr=null;
		function ABBP(){
				if(marginleft==-1000){
					marginleft=0
				}
				marginleft--;				
				imgobj.style.marginLeft = marginleft+'px';
				if(marginleft%100==0){
					clearInterval(mnr);
					setTimeout(function(){
						clearInterval(mnr)
						mnr=setInterval(ABBP,50)
					},1000)
					
				}
			
	
			}
			function ABBD(){
				clearInterval(mnr);
			}
		function MOVE(){
			clearInterval(mnr)
			mnr=setInterval(ABBP,50)
		}	
		onload = function(){
			mnr = setInterval(ABBP,50)
		}
		
	</script>
</html>
